<template>
	<view class="Index">
		<!-- 瀑布流布局列表 -->
		<view class="pubuBox">
			<view class="pubuItem">
				<block v-for="(item, index) in comList" :key="index">
					<view class="item-masonry">
						<image :src="item.img" mode="widthFix"></image>
						<view class="listtitle">
						 <text class="listtitle1">{{ item.name }}</text>						
						 <view class="listtitle2">
							<text class="listtitle2son">￥</text>
							{{ item.commdityPrice }}
							<text class="listtitle3">团购</text>																			
						</view>
						<view class="purchase">
							<text class="active-purchase">已售{{item.buy}}+</text>						
						</view>
					</view>
				</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'article',
		data() {
			return {
				comList: [{
						img: '/static/images/台球社.jpg',
						name: '熊猫球社24H自助台球|中式台球畅打',
						commdityPrice: 100,
						buy:600
					}, {
						img: '/static/images/猫咖.jpg',
						name: '茶屿猫咖|双人套票',
						commdityPrice: 100,
						buy:600
					},
					{
						img: "/static/images/盛和水汇.jpg",
						name: '盛和水汇|浴咨票',
						commdityPrice: 100,
						buy:600						
					}, {
						img:'/static/images/人间Shake酒馆.jpg',
						name: '人间Shake酒馆|实惠套餐',
						commdityPrice: 100,
						buy:600
					}, {
						img: '/static/images/独角兽网吧.jpg',
						name: '独角兽网吧',
						commdityPrice: 100,
						buy:600
					}
				], 
			};
		}
	}
</script>

<style scoped="scoped" lang="scss">
	//瀑布流
	page {
		background-color: #eee;
		height: 100%;
	}

	.pubuBox {
		padding: 22rpx;
	}

	.pubuItem {
		column-count: 2;
		column-gap: 15rpx;
	}

	.item-masonry {
		box-sizing: border-box;
		border-radius: 15rpx;
		overflow: hidden;
		background-color: #fff;
		break-inside: avoid;
		/*避免在元素内部插入分页符*/
		box-sizing: border-box;
		margin-bottom: 20rpx;
		box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
	}

	.item-masonry image {
		width: 100% !important;	
	}

	.listtitle {
		padding-left: 22rpx;
		font-size: 30rpx;
		padding-bottom: 22rpx;
		}
		.listtitle1 {
			line-height: 39rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			min-height: 39rpx;
			max-height: 78rpx;
			font-size: 35rpx;
			
		}

		.listtitle2 {
			color: #ff0000;
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: bold;
			padding-top: 22rpx;
			}
			.listtitle2son {
				font-size: 32rpx;
			}
		.listtitle3 {
			font-size: 28rpx;
			color: black;
			line-height: 32rpx;
			padding-top: 8rpx;
			padding-right: 15rpx;
			padding-left: 15rpx;
			border: 1rpx solid lightgray;
			border-radius: 15rpx;			
			align-content: center;
			margin-left: 140rpx;
		}
		.purchase {
			display: flex;
			align-items: center;
			padding-bottom: 10upx;
		}
		
		.active-purchase {
			margin-top: 12rpx;
			margin-left: 155rpx;
			font-size: 30rpx;
			margin-left: 200rpx;
		}
	.Index {
		width: 100%;
		height: 100%;
	}
</style>